<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-button @click="$router.push({ name: 'role_add'})" type="primary" size="mini">添加</el-button>
    </div>

    <el-table ref="selection" :data="listData" border style="width: 100%"  @selection-change="select">
      <el-table-column fixed type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="desc" label="描述"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click.native.prevent="edit(scope.$index, listData)" type="primary" size="mini">编辑</el-button>
          <el-button @click.native.prevent="deleteRow(scope.$index, listData)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="text-align : right; float : right; margin-top: 10px;">
      <!--<span class="demonstration">完整功能</span>-->
      <el-pagination
              @size-change="handlePageSize"
              @current-change="handlePage"
              :current-page="pageNum"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "@/axios";
import { isIntNum } from "@/assets/js/common";
export default {
  name: "role_list",
  data() {
    return {
      role_id: [],
      listData: [],
      pageTotal: 0,
      pageNum: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.getRole();
  },
  methods: {
    //获取勾选参数
    select(val) {
      let vm = this;
      vm.role_id = [];
      for (let i in val) {
        vm.role_id.push(val[i].role_id);
      }
      //   console.log(vm.role_id);
    },
    //当前页数
    handlePage(value) {
      this.pageNum = value;
      this.getRole();
    },
    //每页显示条数
    handlePageSize(value) {
      this.pageSize = value;
      this.getRole();
    },
    //获取角色列表
    getRole() {
      let vm = this;
      axios
        .post("/admin/role/get-lists", {
          page: this.pageNum,
          limit: this.pageSize
        })
        .then(response => {
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            vm.pageTotal = result.total;
            vm.listData = result.data;
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$message.info("网络或服务器异常");
        });
    },
    //编辑角色
    edit(index) {
      // alert(this.listData[index].menu_id)
      this.$router.push({
        name: "role_edit",
        params: { role_id: this.listData[index].id }
      });
    },
    //删除
    del: function(index = "") {
      let vm = this;
      vm.ids = [];
      //判断单条多条操作
      if (!isIntNum(index)) {
        vm.ids.push(vm.listData[index].id);
      } else {
        if (vm.ids.length < 1) {
          vm.$message.error("请勾选数据！");
          return false;
        }
      }

      this.$confirm('是否确认删除吗?', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios
          .post("/admin/role/delete", {
            ids: vm.ids
          })
          .then(response => {
            let status = response.status;
            let data = response.data;
            if (data.code == 200) {
              this.$message({
                message: '操作成功!',
                type: 'success',
                onClose: function(msg) {
                  vm.getRole();
                  vm.role_id = [];
                }
              });
            } else {
              vm.$message.error(data.message);
            }
          })
          .catch(error => {
            //vm.$Message.info("网络或服务器异常");
          });
      }).catch(() => {
        vm.ids = [];
        this.$refs.selection.selectAll(false);
      });
    },
  }
};
</script>